<template>
  <div class="login">
    <el-card shadow="hover">
      <div class="login-title">
        <p>登录</p>
      </div>
      <div class="login-form">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item  prop="username">
            <el-input v-model.number="ruleForm.username" placeholder='用户名'></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder='密码'></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click.enter="submitForm()">登录</el-button>
          </el-form-item>
					<el-form-item>
						<el-button @click="register()">注册</el-button>
					</el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Notification } from 'element-ui';
import {login} from '@/API/index.js';
export default {
  data() {
    var checkUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };

    return {
			//表单数据
      ruleForm: {
        username: null,
        password: null
			},
			//效验规则
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: checkUser, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm() {
     //登录事件
     const {username,password}=this.ruleForm;
     if (!username && !password) {
       Notification.error({
          title: '输入不能为空!',
          message: '请输入用户名或密码!'
        })
       return false;  
     }
		 login(username,password).then(res=>{
       console.log(res);
       if (res.data.code===1) {
         Notification.success({
          title: '登录成功!',
          message: '恭喜您登录成功!'
        })
        //登录成功跳转路径
        this.$router.push('/');
        //登录成功将登录状态改为true
        this.$store.commit('login',true)
       }else{
         Notification.error({
          title: '登录失败!',
          message: '请检查用户名或密码!'
        })
       }
       
      
     })

		 
    },
    register() {
		 //注册事件
		 this.$router.push('/register');


    }
  }
};
</script>

<style scoped>
.el-card {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 40vw;
	height: 70vh;
	text-align: center;
}
.login-title {
  width: 100%;
  text-align: center;
}
.login-title p {
  color: #555;
  font-size: 20px;
  font-weight: bold;
}
.login-form {
  height: 50vh;
  width: 100%;
	margin-top: 12vh;
	text-align: center;
}
.el-form-item{
	display: flex;
	justify-content: center;
}
.el-input{
	width: 20vw;
	margin-top: 2vh;
}
.el-button {
  width: 20vw;
	height: 7vh;
	margin-top: 0.5vh;
}
.el-button--primary{
	margin-top: 5vh;
}
</style>